<template>
    <div>
        <!-- 头部 -->
        <div class="frist_show">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/assess'}">评估测评</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/evaluate/' + this.$route.params.rid + '/' + this.$route.params.rname}">{{this.$route.params.rname}}</el-breadcrumb-item>
              <el-breadcrumb-item>{{this.$route.params.rname}}答题</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
        </div>
        <!-- 背景颜色 -->
        <div style="width:1550px;height:300px;background-color: DeepSkyBlue;margin-top:54px;">
             <div style="position: absolute;top: 140px;left:80px">
                <div>
                    <p style="font-size:25px">{{numver}}-{{count}}  {{books[num].rubName}}</p>
                </div>
                <!-- 答题卡 -->
                    <div style="width:1400px;height:450px;background-color: white;z-index:9999;position: absolute;top:120px;left:0px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 10, 0, .12)">
                            <!-- 题库 -->
                            <ul style="position:absolute;top:50px;left:20px">
                                <div v-for="b in listhand" :key="b.rubOpId" @click="choose(b.rubOpScore)" v-show="b.rubId === books[num].rubId">
                                    <el-radio v-model="radio" :label="b.rubOpId"  style="margin-bottom:50px;display: block;" @change="changeRadio($event)" >{{b.rubOpName}}</el-radio>
                                </div>
                            </ul>
                    <button @click="next()" class="xiati" v-if="numver === count ? false:true">下一题</button>
                    <button @click="wancheng" class="xiati" v-if="numver === count ? true:false">完成</button>
                    <button @click="fh()" class="fh">返回</button>
                    </div>
                </div>
         </div>
    </div>
</template>

<script>
export default {
  name: 'Quetion',
  data () {
    return {
      rval: this.$route.params.rval,
      rid: this.$route.params.rid,
      rname: this.$route.params.rname,
      num: 0,
      numver: 1,
      meName: '',
      count: 0,
      timu: true,
      params: false,
      fen: [],
      books: [{rubId: 0}],
      rubritype: [],
      listhand: [],
      listQuetion: [],
      // 选择的答案
      str: '',
      radio: 0,
      userid: 0,
      meNum: 0
    }
  },
  methods: {
    //   下一题
    next () {
      // 选项的id
      this.listQuetion.push({rubId: this.books[this.num].rubId, rubOpId: this.str, memId: this.userid, meNum: this.meNum})
      if (this.num < this.books.length - 1) {
        if (this.fen[this.num] > 0) {
          this.numver += 1
          this.num += 1
        }
      }
    },
    choose (index) {
      this.fen[this.num] = index
      this.meNum = index
    },
    // 查询题库表
    initQuetionwj () {
      this.$axios.post(`/api/QuestionPg/WjRubric/${this.rval}`).then(result => {
        this.count = result.data.length
        this.$axios.post(`/api/QuestionPg/QuetionOPtion/${this.rval}`).then(results => {
          this.books = []
          result.data.forEach((item, index) => {
            this.books.push(item)
            results.data.forEach((items, index) => {
              if (items.rubId === item.rubId) {
                this.listhand.push(items)
              }
            })
          })
        })
      })
    },
    changeRadio (val) {
      this.str = val
    },
    // 完成评估
    wancheng () {
      this.listQuetion.push({rubId: this.books[this.num].rubId, rubOpId: this.str, memId: this.userid, meNum: this.meNum})
      this.$axios.post(`/api/QuestionPg/SaveQuetion/${this.rval}/${this.userid}`, this.listQuetion).then(result => {
        this.$message({
          type: 'success',
          message: '评估成功'
        })
        this.$router.push('/evaluate/' + this.rid + '/' + this.rname)
      })
    },
    // 点击返回按钮
    fh () {
      this.$router.push('/evaluate/' + this.rid + '/' + this.rname)
    }
  },
  created () {
    this.initQuetionwj()
    let a = sessionStorage.getItem('user')
    let id = JSON.parse(a)
    this.userid = id.memId
    this.meName = id.memName
  }
}
</script>

<style>
.frist_show{position: absolute;top: 0px;left:20px;width: 1500px;height: 50px;}
.frist_show .el-breadcrumb{margin-top: 15px;}
.xiati{position: absolute;top: 360px;left:250px;background-color: DeepSkyBlue;width:100px;height:50px;border-radius: 8px;border:none;outline: none;color:white; cursor: pointer;transition: all 0.4s;}
.xiati:hover{transform: scale(0.9);}
.fh{position: absolute;top: 360px;left:550px;background-color: darkgrey;width:100px;height:50px;border-radius: 8px;border:none;outline: none;color:white; cursor: pointer;transition: all 0.4s;}
.fh:hover{transform: scale(0.9);}
.shangti{position: absolute;top: 360px;left:400px;background-color: DeepSkyBlue;width:100px;height:50px;border-radius: 8px;border:none;outline: none;color:white; cursor: pointer;transition: all 0.4s;}
.shangti:hover{transform: scale(0.9);}
</style>
